import React from 'react';
import { View } from 'react-native';
import _ from 'lodash';
import { observer } from 'mobx-react';
import Form from '../../../components/Form';
import Spin from '../../../components/spin';
import Button from '../../../components/Button';
import { mobileRule } from '../../../utils/rules';
import SendBtn from './sendBtn';

const t = Form.t;

@observer
class CheckMobile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {},
      pending: false
    };
  }
  render() {
    const BaseType = {
      mobile: t.refinement(t.String, value => mobileRule(value)),
      code: t.String
    };
    const options = {
      fields: {
        mobile: {
          label: '手机号',
          error: '手机号格式不正确',
          placeholder: '请输入手机号',
          onChange: this.onChange,
          config: {
            rightCont: value => {
              return (
                <SendBtn
                  sendAction={() => {
                    if (mobileRule(value)) {
                      this.props.sendAction(value, this.props.action);
                    }
                  }}
                  disabled={!mobileRule(value)}
                  sendError={this.props.sendError}
                  style={{ width: 64 }}
                />
              )
            }
          },
          factory: Form.TextBox,
        },
        code: {
          label: '短信验证码',
          error: '必填项',
          placeholder: '请输入短信验证码'
        }
      }
    };
    return (
      <Spin visible={this.state.pending}>
        <View style={{ flex: 1 }}>
          <Form
            {...this.props}
            formType={BaseType}
            options={options}
            extra={
              <Button
                title={this.props.submitText}
                onPress={Form.submit}
                type="primary"
                style={{
                  margin: 10
                }}
              />
            }
          />
        </View>
      </Spin>
    );
  }
}

export default CheckMobile;
